<template>
    <div class="containerBox tableList">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="serialNnumber" label="流水号">
        </el-table-column>
        <el-table-column label="金额">
          <template slot-scope="scope">
            <span class="income" v-if="scope.row.access === 'income'">+ {{scope.row.amount}}</span>
            <span v-else>- {{scope.row.amount}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="用户">
        </el-table-column>
        <el-table-column prop="occurrenceMode" label="发生方式">
        </el-table-column>
        <el-table-column prop="date" label="日期">
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
export default {
  name: 'runningDetail',
  data () {
    return {
      tableData: [
        {
          serialNnumber: '20181219001',
          amount: '218.00',
          userName: '司令',
          occurrenceMode: '订单',
          date: '2018.11.20 14:32',
          // 收入
          access: 'income'
        }, {
          serialNnumber: '20181219001',
          amount: '218.00',
          userName: '司令',
          occurrenceMode: '订单',
          date: '2018.11.20 14:32',
          // 支出
          access: 'expenditure'
        }, {
          serialNnumber: '20181219001',
          amount: '218.00',
          userName: '司令',
          occurrenceMode: '订单',
          date: '2018.11.20 14:32',
          // 收入
          access: 'income'
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
  .containerBox{
    /deep/ .el-table .cell{
      color:#000;
      text-align:center;
      font-size:14px;
      line-height:50px;
    }
    /deep/ .is-scrolling-none span{
      font-size:14px;
    }
    .income{
      color:green;
    }
    span{
      color:red;
    }
  }
</style>
